<template>
  <div>
    {{ state.name }}
  </div>
</template>

<script>
import { watch, reactive } from 'vue'
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const state = reactive({ name: 'lucy' })
    /**
     * vue3.x 中监听对象变化，深度监听不需要使用 deep
     * 监听多个源，使用数组，
     * 监听对象中的值，传入的参数两个都是回调函数
     */
    watch(props.item, (oldVlaue, newValue) => {
      state.name = newValue.name
    })
    return {
      state
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
